<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@include file="../blocks/header.jsp" %>



<div class="row">
    <%@include file="menu.jsp" %>
    <div class="span6">

        <a href="#newJournalItemModal" role="button" class="btn btn-primary" data-toggle="modal">Добавить запись</a>
        <a href="#" role="button" class="btn btn-primary" onclick="buildReport(${user.id})">Построить отчет</a>
        <br/>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Дата</th>
                    <th>САД</th>
                    <th>ДАД</th>
                    <th>Пульс</th>
                    <th>Аритмия</th>
                    <th>Деятельность</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <c:forEach  var="item" items="${journalItems}">
                    <tr>
                        <td><fmt:formatDate value="${item.date}" pattern="dd.MM.yy HH:mm" /></td>
                        <td>${item.sad}</td>
                        <td>${item.dad}</td>
                        <td>${item.pulse}</td>
                        <td>${item.arrhythmia ? "Наблюдается" : "Не наблюдалась"}</td>
                        <td>${item.job}</td>
                        <td>
                            <!--<button class="btn btn-small" type="button">Изменить</button>-->
                            <a href="/cabinet/deleteJournalItem/${item.id}" class="btn btn-small delete-journalItem">Удалить</a>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
        <script>
            $(function(){
                $('.delete-journalItem').click(function(event){
                    if (confirm("Вы действительно хотите удалть запись в журнале?")) {
                        return true;
                    }
                    event.preventDefault();
                    return false;
                });
            });
        </script>
    </div>
    <div class="span6">
        <p style="text-indent:15px;">
            В таблицу Вы можете вносить следующие данные: дату и время измерения артериального давления, <strong>САД</strong> - систолическое артериальное давление (мм рт. ст.), <strong>ДАД</strong> - диастолическое артериальное давление (мм рт. ст.), частоту пульса (уд/мин), а также (не обязательно) - один из предложенных пунктов "Дневника", если он соответствует ситуации, в которой проводилось данное измерение.<br/>
            Внесение данных может осуществляться в любом порядке и в любом количестве.<br/>
            Чем больше данных о вашем <strong>АД</strong> будет внесено, тем легче будет вашему лечащему врачу правильно и эффективно осуществлять лечение артериальной гипертонии.<br/>
            Для внесения новых данных нажмите «Добавить» в верхнем левом углу таблицы.<br/>
            В появившейся строке внесите необходимые значения.<br/>
            При повторном вводе данных процедуру необходимо повторить.<br/>
            Мы рекомендуем вносить данные об <strong>АД</strong> по следующим схемам.<br/>
        </p>
        <p style="text-indent:15px;">
            После внесения данных нажмите «Сохр» в начале строки вносимых данных. Данные сохранятся в Вашем личном кабинете. Далее, используя панель «Сформировать отчет», Вы можете подготовить отчет для вашего лечащего врача.
        </p>

    </div>

</div>

<div id="newJournalItemModal" class="modal hide fade">
<form action="/cabinet/addJournalItem" method="POST">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Новая запись в дневнике</h3>
    </div>
    <div class="modal-body">
        <p>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>Дата</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3">
                            <div class="input-append date" id="dateJournalItem" data-date-format="dd.mm.yyyy hh:ii">
                                <input size="16" type="text" id="dateJournalItemInput" name="date">
                                <span class="add-on"><i class="icon-th"></i></span>
                            </div>
                        </td>

                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <th>САД</th>
                        <th>ДАД</th>
                        <th>Пульс</th>
                    </tr>
                    <tr>
                        <td><input type="text" name="sad" class="input-mini"/></td>
                        <td><input type="text" name="dad" class="input-mini"/></td>
                        <td><input type="text" name="pulse" class="input-mini"/></td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <th>Аритмия</th>
                        <th colspan="2">Деятельность</th>
                    </tr>
                    <tr>

                        <td><label><input type="checkbox" name="arrhythmia"/> Наблюдалась</label></td>
                        <td colspan="2">
                            <select id="blankJobsSelect">
                                <option value="other">Другая</option>
                                <option value="">Работа за компьютером</option>
                                <option value="">Перед сном лежа в кровати</option>
                                <option value="">Устром после сна лежа в кровати</option>
                                <option value="">После приема пищи</option>
                                <option value="">После приема лекарства</option>
                                <option value="">На приеме у врача</option>
                            </select>
                            <textarea name="job"></textarea>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" type="submit">Добавить</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true" type="reset">Отмена</button>
    </div>
    <script>
        $(function(){

            var dateFormat = "DD.MM.YYYY HH:mm";

            $('#newJournalItemModal').on('shown', function() {
                var dateStr = moment().format(dateFormat);
                console.log(dateStr);
                $("#dateJournalItemInput").val(dateStr);

                $("#dateJournalItem").datetimepicker({
                    minView: 1,
                    autoclose: true,
                    language: "${pageContext.response.locale == 'ru' || pageContext.response.locale == 'ua' ? 'ru' : 'en'}"
                }).on('changeDate', function(ev){
                    ev.date.setMilliseconds(0);
                    ev.date.setMinutes(0);
                });
            });

            $('#newJournalItemModal [type=submit]').click(function(){

                $('#newJournalItemModal [name=job]').val($("#blankJobsSelect :selected").html());

                $('#newJournalItemModal form').submit();
            });

            $('#newJournalItemModal [type=reset]').click(function(){
                $('#newJournalItemModal input,textarea').val('');
                $("#blankJobsSelect :first").prop("selected", true);
                $("#blankJobsSelect").change();
            });

            $("#blankJobsSelect").change(function(){
                if ($(this).val() == "other") {
                    $('#newJournalItemModal [name=job]').show();
                } else {
                    $('#newJournalItemModal [name=job]').hide();
                }
            });


        });
    </script>
</form>
</div>

<div id="confirmDeleteJournalItemModal" class="modal hide fade">
    <form action="/cabinet/addJournalItem" method="GET">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Удалить запись</h3>
        </div>
        <div class="modal-body">
            <p> Действительно хотите удалить запись в журнале?
            </p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" type="submit">Удалить</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Отмена</button>
        </div>
        <script>
            $(function(){

            });
        </script>
    </form>
</div>

<%@include file="../common/dialog_report.jsp" %>

<%@include file="../blocks/footer.jsp" %>